﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title></title>
    <link href="../src/css/rayui.css" rel="stylesheet" />
    <script src="../plugins/jquery-1.12.4.js"></script>
    <script src="../src/js/rayui.js"></script>
    <style>
        body {
            width: 900px;
            padding: 20px;
            margin: 0 auto;
        }

        .treebtn {
            display: inline-block;
            padding: 0 3px;
            cursor: pointer;
        }
    </style>
    <script>

        var index=1, data = [];
        var now = new Date(2017, 10, 1);
        var mm = now.getMinutes();

        function getNowFormatDate(date) {
            var seperator1 = "-";
            var seperator2 = ":";
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            var currentdate = year +
                seperator1 +
                month +
                seperator1 +
                strDate +
                " " +
                date.getHours() +
                seperator2 +
                date.getMinutes() +
                seperator2 +
                date.getSeconds();
            return currentdate;
        }

        var icons = ["layer-icon-0", "layer-icon-1", "layer-icon-2", "layer-icon-3", "layer-icon-4", "layer-icon-5", "layer-icon-20", "layer-icon-21", "layer-icon-22", "layer-icon-23", "layer-icon-24", "layer-icon-25"],
            iconsCount = icons.length;

        function getNodes(count, prefix) {
            var tmpdata = [];
            for (var i = 0; i < count; i++) {
                now.setMinutes(mm + i);
                var model = {
                    id: index++,
                    name: "我是菜单" + (prefix || '') + i,
                    icon: "" + icons[i % iconsCount],
                    createTime: getNowFormatDate(now)
                }
                tmpdata.push(model);
            }
            return tmpdata;
        }

        data = getNodes(3);

        for (var i = 0; i < data.length; i++) {
            data[i].children = getNodes(3, data[i].id + "-");
        }

    </script>
</head>
<body>

    <a class="btn-link" href="#anchor">使用说明</a>

    <br />
    <br />
    
<div class="row">
    <div class="col-4">
        <h4>7、自定义文本框，禁用部分数据点击</h4>
        <div id="tree7">
			<div><input type="text" id="searchInput" placeholder="自定义的文本检索框" /></div>
		</div>
    </div>
    <div class="col-4">
        <h4>8、自定义图标
        <input type="button" id="setHeight" class="rayui-btn btn-3x-sh" value="设置高度为200px" data-height="360"/></h4>
        <div id="tree8"></div>
    </div>
    <div class="col-4">
        <h4>9、拖拽节点</h4>
        <div id="tree9"></div>
    </div>
</div>

    <div class="row">
        <div class="col-4">
            <h4>4、高度固定，支持数据查询</h4>
            <div id="tree4"></div>
        </div>
        <div class="col-4">
            <h4>5、多级颜色，input宽度100%</h4>
            <div id="tree5"></div>
        </div>
        <div class="col-4">
            <h4>6、编辑树，鼠标移动显示按钮</h4>
            <div id="tree6"></div>
        </div>
    </div>


    <div class="row sameHeight">
        <div class="col-4">
            <h4>1、数据默认折叠，监听折叠事件</h4>
            <div id="tree1"></div>
        </div>
        <div class="col-4">
            <h4>2、ajax请求，宽220px高200px</h4>
            <div id="tree2"></div>
        </div>
        <div class="col-4">
            <h4>3、数据展开，支持数据查询</h4>
            <div id="tree3"></div>
        </div>
    </div>


    <script>
        rayui.use(["tree", "layer"], function () {
            
            var tree = rayui.tree,
                layer = rayui.layer;

            function initTree9() {
                var tmpData = $.extend(true, [], data);
                var first = tmpData[0].children[0];
                first.children = getNodes(2, "0-0-");
                first = first.children[0];
                first.children = getNodes(2, "0-0-0-");

                tmpData[0].children[2].disabled = true;
                var treeIns = tree.render({
                    elem: "#tree9",
                    data: tmpData,
                    height: 360,
                    spread: true,
                    drag: true,
                    formatter: function (v, data) {
                        return "id="+data.id + "," + v ;
                    }
                });
                treeIns.on("click", function (v, li) {
                    layer.msg("您点击了 " + v.name, { time: 2000, shade: false });
                });
                treeIns.on("dragstart", function () {
                    typeof console.log === "function" && console.log("dragstart");
                });
                treeIns.on("dragmoving", function () {
                    typeof console.log === "function" && console.log("dragmoving");
                });
                treeIns.on("dragend", function(obj) {
                    //elem: 移动的节点，fromData: 移动节点数据，toParentData：移动到的节点数据，
                    // toIndex：移动到节点的序列编号，position：位置（0上 1中 2下）
                    layer.alert("id=" + obj.fromData.id + "的节点 移动到了 id=" + obj.toParentData.id + "下，下表编号为：" + obj.toIndex + ",position=" + obj.position);
                    typeof console.log === "function" && console.log("dragend");
                });
            }

            function initTree8() {
                var treeIns = tree.render({
                    elem: "#tree8",
                    data: data,
                    height: 360,
                    spread: true,
                    icon: false,
                    skin:"green",
                    formatter: function(v, data) {
                        return '<i class="ra layer-icon ' + data.icon + '" style="font-size:18px;"></i>&nbsp;<span>' + v + '</span>';
                    }
                });
                $("#setHeight").click(function () {
                    var height = $(this).data("height"),
                        toheight = height === 200 ? 360 : 200;
                    $(this).data("height", toheight).val("设置高度为" + height + "px");
                    treeIns.setHeight(toheight);
                });
            }

            function initTree7() {
                var tmpData = $.extend(true, [], data);
                tmpData[0].children[0].disabled = true;
                var treeIns = tree.render({
                    elem: "#tree7",
                    data: tmpData,
                    height: 360,
                    spread: true,
					localSearch: "#searchInput"
                });
                treeIns.on("click", function (v, li) {
                    layer.msg("您点击了 " + v.name, { time: 2000, shade: false });
                });
            }

            function initTree6() {
                var treeIns = tree.render({
                    elem: "#tree6",
                    data: data,
                    height: 400,
                    spread: true,
                    edit: function (data) {
                        var btns = [];
                        btns.push('<span class="treebtn" event="add"><i class="ra ra-add"></i></span>');
                        btns.push('<span class="treebtn" event="sub"><i class="ra ra-subtract"></i></span>');
                        btns.push('<span class="treebtn" event="del"><i class="ra ra-dustbin"></i></span>');

                        return btns.join('');
                    },
                    localSearch: true
                });
                treeIns.on("edit", function(evt, obj) {
                    layer.alert("触发事件" + evt + ", name=" + obj.data.name);
                });
            }

            function initTree5() {
                var tmpData = $.extend(true, [], data);
                var first = tmpData[0].children[0];
                first.children = getNodes(2, "0-0-");
                first = first.children[0];
                first.children = getNodes(2, "0-0-0-");
                first = first.children[0];
                first.children = getNodes(2, "0-0-0-0-");
                first = first.children[0];
                first.children = getNodes(2, "0-0-0-0-0-");

                var treeIns = tree.render({
                    elem: "#tree5",
                    data: tmpData,
                    width: 260,
                    height: 400,
                    inputArea: "100%",
                    spread: true,
                    bgColors: true,
                    localSearch: true,
                    onClick: function (v, li) {
                        layer.msg("您点击了 " + v.name, { time: 2000, shade: false });
                    }
                });
            }

            function initTree4() {
                var treeIns = tree.render({
                    elem: "#tree4",
                    data: data,
                    height: 400,
                    spread: true,
                    localSearch: true
                });
            }

            function initTree3() {
                var treeIns = tree.render({
                    elem: "#tree3",
                    data: data,
                    spread: true,
                    localSearch: true
                });
            }

            function initTree2() {
                var treeIns = tree.render({
                    elem: "#tree2",
                    url: "/Data.ashx?action=GetTreeGrid",
                    width: 220,
                    height: 200,
                    spread: true
                });
            }

            function initTree1() {
                var treeIns = tree.render({
                    elem: "#tree1",
                    data: data
                });
                treeIns.on("expanded", function (li, data, spreadto) {
                    layer.msg(data.name + "节点当前状态：" + (spreadto ? "展开" : "折叠"), { time: 2000, shade: false });
                });
            }

            initTree1();
            initTree2();
            initTree3();
            initTree4();
            initTree5();
            initTree6();
            initTree7();
            initTree8();
            initTree9();

        })

    </script>


    <h4 id="anchor">使用说明</h4>
    <pre style="color: #159200; word-wrap: break-word; white-space: pre-wrap;">

使用说明：

tree属性option：
elem: 容器对象
url：ajax请求路径
method：ajax请求方法，可选get|post，默认get
where: ajax查询条件，object对象
width：容器宽度，数值不填自适应
height：容器高度，数值|full-数值|sel-jqselectors-数值(jqselectors选择器不支持-符号，因为需要按照-分割)。
             使用sel模式时，只需填写table下方的容器选择器，系统会自动剔除上方的dom高度，如果固定数值没有，请填写0，不能省略
localSearch: 是否进行本地查询，可选true|false|input对象，true自动添加input输入框，false不进行结果集查询，
            input对象使用自定义input进行查询，默认false
inputArea: 查询框的宽高，["100%","20px"]:宽高；"200px":宽，需要和localSearch配合使用，注意如果localSearch设置的是input对象，
            不要书写这个属性，此属性会设置input对象的宽高
fieldName: "name", //显示列
fieldChildren: "children", //子节点
formatter: function(value, data){} 格式化，返回html标签，一般可用于格式化显示数据
edit: function(data, editPanel){} 格式化，返回html标签，程序会追加到行后面
loading： 请求数据时，是否显示loading，默认true
skin：皮肤支持
icon：是否使用图标，可选true|false，默认true
iconSpread：是否使用展开折叠图标，可选true|false，默认true，不适用时需要自己控制展开折叠
bgColors：层级背景色，可选true|false|[#ffffff,……]，默认值false，true：使用预置的6种颜色，false：不使用背景色，数组：自定义颜色

数据属性：
spread：展开折叠，可选true|false
disabled：禁用，可选true|false

属性事件：
onAjaxBeforeSend(xhr)：和ajax beforeSend参数一致，此时this为本次ajax请求时传递的options参数。
                                        如果返回false可以取消本次ajax请求
onAjaxSuccess(result)：ajax成功请求数据时（清除上次数据后），在这里可以做数据统一。
                                    需要返回json数据，格式为{code: 0, msg: '错误信息', count: 100, data: []},code为0时表示成功。
                                    此时this为本次ajax请求时传递的options参数
onAjaxError(xhr, textStatus, errorThrown)：和ajax error参数一致，此时this为本次ajax请求时传递的options参数

onBeforeAddRow(rowindex, data)： 添加行数据前返回行索引和行数据
onAddRow(rowindex, tr, data)： 添加行数据后返回行索引、行和行数据
onComplete(data)：所有处理完毕（table渲染数据结束），data为onAjaxSuccess返回的result数据


treeIns方法：
reload：重新加载
getData(index): index为选中的序列号
setWidth(w)：w为数值，宽度
setHeight(h)：h为数值，高度
setWidthHeight(w, h)w为数值，宽度；h为数值，高度
on(event, callback)：事件绑定。event字符串，可选如下，callback为函数
    edit返回函数function(evt, obj)，evt为事件，obj包含index，data，tr，del，update；index为tr行号，
                                                     tr为dom对象，data为数据（只监听包含event的click事件）
    expanded返回函数function(li, data, spreadto): 行展开时回调，li：当前li标签，data行数据，
                                                                spreadto当前状态，true展开，false折叠
    click返回函数function(data, li)，data为当前数据，li当前li标签，this为a标签
    dragstart返回函数function()，无参数，this为当前移动的节点。如果这一步需要节点数据，可以调用treeIns.getData(节点index)
    dragmoving返回函数function()，无参数，this为当前移动的节点。如果这一步需要节点数据，可以调用treeIns.getData(节点index)
    dragend返回函数function(obj)，obj包含elem，fromData，toParentData，toIndex，position；
                                                    如果返回false，停止更新本地数据和节点
                                                    this：指向移动的节点dom
                                                    elem: 移动的节点
                                                    fromData: 移动节点数据
                                                    toParentData：移动到的节点数据（如果是顶级节点，id=-1）
                                                    toIndex：移动到节点的序列编号(注意这是移动前的编号)
                                                    position：位置（0上 1中 2下）


可全局配置参数：
$.options：属性包含如下
        expandRow: false,
        nowrap: true,
        minHeight: 80,


重要说明：
1、dragend方法：
        a）如果当前步骤执行数据库操作，之后再刷新tree，建议返回false，可以增加性能（减少了json的节点移动和刷新tree dom的时间）。
             因为操作数据库后手动重新请求数据库并刷新了tree，如果不返回false，就执行了两边tree dom的刷新，没有必要。
        b）如果当前步骤不执行数据库操作，想最终一起操作数据，可以不监听dragend方法，或则返回true，或则无返回值，此时可以调用
             treeIns.getData()得到整个json数据，自己再操作数据库
        c）移动数据极易造成和数据库数据不一致问题，尤其涉及toIndex的时候，建议查询数据库后刷新tree


</pre>

</body>
</html>